<template>
	<view class="root">

		<view :class="{ 'hist-item': true, 'hist-item-lose': item.integral < 0}" v-for="(item, index) in hist"
			:key="index">
			<view class="hist-top" @click="toggleExpand(index)">

				<view class="vs">
					<view class="avatar">
						<image :src="myInfo.avatarurl" mode="aspectFill"></image>
						<text v-if="item.expanded">{{ myInfo.nickname }}</text>
					</view>

					<view class="vs-txt">
						<image src="http://haojiezhe12345.top:8090/miniprogram_static/game/vs.png" mode="aspectFit">
						</image>
						<text>{{ getRelativeHumanTimeFromTimeArr(item.gameStartTime) }}</text>
					</view>

					<view class="avatar">
						<image :src="item.opponentInfo.avatarurl" mode="aspectFill"
							@click.stop="shouldGotoUserhome(item, index)">
						</image>
						<text v-if="item.expanded" @click.stop="shouldGotoUserhome(item, index)">
							{{ item.opponentInfo.nickname }}
						</text>
					</view>
				</view>

				<view class="result">
					<view>{{ item.integral > 0 ? '胜' : '负' }}</view>
					<view>({{ item.integral >= 0 ? '+' : '' }}{{ item.integral }})</view>
				</view>
			</view>

			<view class="hist-detail" v-if="item.expanded">
				<view class="vs-detail">
					<view>
						<tilted-progress :percentage="item.rightNumber / item.puzzleNumber" :textL="item.rightNumber"
							:textR="item.puzzleNumber - item.rightNumber" height="1.5em"></tilted-progress>

						<view style="display: flex; justify-content: space-between;">
							<view>答对题数</view>
							<view>答错题数</view>
						</view>
					</view>

					<text>正确率：{{ Math.round(item.rightNumber / item.puzzleNumber * 100) }}%</text>
					<text>最高连续答对：{{ item.stillRightNumber }}</text>
				</view>

				<view class="hist-prop">
					<text>{{ ['', '对战已完成', '对战中断'][item.isSuccess] }}</text>
					<text>{{ timeArr2HumanStr(item.gameStartTime) }}</text>
				</view>
			</view>

		</view>

		<view class="blank-list-placeholder" v-if="!hist.length">暂无对战记录</view>

	</view>
</template>

<script>
	import {
		getUserInfo,
		getGameHistory,
		getUserSomeMsg,
	} from '../../config/api'

	import {
		timeArr2HumanStr,
		getRelativeHumanTimeFromTimeArr,
		gotoUrl,
	} from '../../utils'

	import tiltedProgress from '../models/tiltedProgress.vue'

	export default {
		components: {
			tiltedProgress,
		},

		data() {
			return {
				timeArr2HumanStr,
				getRelativeHumanTimeFromTimeArr,

				hist: [{
					"gameStartTime": [],
					"integral": 30,
					"isSuccess": 1,
					"matcherId": 0,
					"puzzleNumber": 100,
					"rightNumber": 70,
					"stillRightNumber": 20,
					expanded: false,
					opponentInfo: {
						"avatarurl": "../../static/chuti.jpg",
						"city": "",
						"gender": 0,
						"hobby": "",
						"isFriend": 0,
						"nickname": "name",
						"province": "",
						"userBirthday": ""
					},
				}, {
					"gameStartTime": [],
					"integral": -30,
					"isSuccess": 0,
					"matcherId": 0,
					"puzzleNumber": 100,
					"rightNumber": 30,
					"stillRightNumber": 2,
					expanded: false,
					opponentInfo: {
						"avatarurl": "../../static/chuti.jpg",
						"city": "",
						"gender": 0,
						"hobby": "",
						"isFriend": 0,
						"nickname": "name",
						"province": "",
						"userBirthday": ""
					},
				}],

				myInfo: {
					"avatarurl": "",
					"city": "",
					"createTime": "",
					"gender": 0,
					"hobby": "",
					"id": 0,
					"nickname": "",
					"openid": "",
					"points": 0,
					"province": "",
					"userBirthday": "",
					"userPhone": ""
				},
			}
		},

		onLoad() {
			this.hist = []
			this.loadHist()
		},

		methods: {
			async loadHist() {
				getUserInfo().then(res => {
					this.myInfo = res
				})

				const histres = await getGameHistory()
				this.hist = histres

				this.hist.forEach(item => {
					getUserSomeMsg(item.matcherId).then(res1 => {
						this.$set(item, 'opponentInfo', res1)
					})
				})
			},

			toggleExpand(index) {
				this.$set(this.hist[index], 'expanded', !this.hist[index].expanded)
			},

			shouldGotoUserhome(item, index) {
				if (item.expanded) {
					gotoUrl(`/pages/userhome/userhome?id=${item.matcherId}`)
				} else {
					this.toggleExpand(index)
				}
			},
		}
	}
</script>

<style scoped>
	.root {
		display: flex;
		flex-flow: column-reverse;
	}

	.hist-item {
		background-color: white;
		display: flex;
		flex-flow: column;
		border-bottom: 12px solid #f4f4f4;
	}

	.hist-top {
		display: flex;
		align-items: center;
		border-left: 8px solid #080;
		padding: 12px 6px;
		background: linear-gradient(to right, #aca, white 33%);
	}

	.hist-item-lose .hist-top {
		border-left: 8px solid #b33;
		background: linear-gradient(to right, #eaa, white 33%);
	}

	.vs {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.vs>.avatar {
		flex: 1;
		display: flex;
		flex-flow: column;
		align-items: center;
		gap: 8px;
	}

	.vs>.avatar>image {
		width: 54px;
		height: 54px;
		border-radius: 100vw;
	}

	.vs>.avatar>text {
		font-size: 0.9em;
	}

	.vs>.vs-txt {
		position: relative;
	}

	.vs>.vs-txt>image {
		width: 50px;
		height: 30px;
		display: block;
	}

	.vs>.vs-txt>text {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 1em);
		white-space: nowrap;
		font-size: 0.75em;
		line-height: 1em;
		color: #888;
	}

	.result {
		text-align: center;
		color: #080;
		font-size: 0.9em;
	}

	.result>view:last-child {
		width: 3em;
	}

	.hist-item-lose .result {
		color: #b33;
	}

	.hist-detail {
		padding: 16px 10%;
		background: radial-gradient(white 50%, #ffd);
		font-size: 0.85em;
	}

	.vs-detail {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.vs-detail>view {
		grid-column-start: span 2;
	}

	.vs-detail>text {
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 6px;
		padding: 12px 0;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.hist-prop {
		display: flex;
		justify-content: space-between;
		margin-top: 8px;
		color: #888;
	}
</style>